<template>
    <div class="video-detail">
        <div class="detail-left">
            <h2>视频详情</h2>
            <!-- <h2>MV详情</h2> -->
            <div class="video">
                <video :src="videoUrl"  controls="controls" autoplay="autoplay" loop="loop"></video>
            </div>
            <!-- 视频介绍-->
            <div class="video-introduce">
                <div class="author-img">
                    <img :src="videoInfo.creator.avatarUrl" />
                    <span>{{videoInfo.creator.nickname}}</span>
                </div>
                <div class="video-text">
                    <h2>{{videoInfo.title}}</h2>
                    <span>发布时间：{{videoInfo.publishTime | showDate}}</span>
                    <span>播放量：{{videoInfo.playTime}}</span>
                </div>
            </div>
          
        </div>
        <div class="detail-right">
            <h2>相似视频</h2>
            <VideoListItem v-for="item in similarvideo" :key="item.id" :video="item"/>  
        </div>
        
    </div>
</template>
<script>
import { formatDate } from '@/common/formatDate';
import VideoListItem from '@/components/content/videolist/VideoListItem.vue';
export default {
    inject:['reload'],
    name: "",
    components: {VideoListItem },
    data() {
        return {
            id: "",
            // 视频类型
            videoType: "",
            // 视频信息
            videoInfo: {},
            // 相似视频
            similarvideo: [],
            // 视频的播放地址
            videoUrl:'',
        };
    },
    created() {
        // 获取路由参数
        this.id = this.$route.params.id;
        this.videoType = this.$route.params.type;
        // 判断是MV还是视频
       if (this.videoType == "video") {
            // 视频的信息
            this.getVideoDetailBy();
            // 获取视频的播放地址
            this.getVideoUrlBy();
            // 获取相似的视频
            this.getSimiVideoBy();
        }
    },
    filters: {
		showDate(value) {
			const date = new Date(value);
			return formatDate(date, "yyyy-MM-dd");
		},
	},
    methods: {
        // 获取视频信息
        async getVideoDetailBy(){
            let videoRes = await this.$API.video.getVideoDetail(this.id);
            this.videoInfo = videoRes.data;
        },
        // 获取推荐视频信息
        async getSimiVideoBy(){
            let simiRes = await this.$API.video.getSimiVideo(this.id);
            this.similarvideo = simiRes.data;
        },
        async getVideoUrlBy(){
            let urlRes = await this.$API.video.getVideoUrl(this.id);
            this.videoUrl = urlRes.urls[0].url;
        },
    },
    watch:{
        $route(to,form){
            if(to !== form){
                this.reload();
            }
        }
    }
    
}
</script>
<style lang="less" scoped>
    .video-detail{
        display: flex;
        .detail-left{
            width: 900px;
            .video{
                width: 100%;
                video{
                    width: 100%;
                }
            }
            .video-introduce{
                margin-left: 10px;
                .author-img{
                    img{
                        width: 50px;
                        height: 50px;
                        border-radius: 50% 50%;
                        margin-right: 10px;
                        margin-bottom: 10px;
                    }
                    span{
                        font-size: 16px;
                        &:hover{
                            color: var(--themeColor);
                        }
                    }
                }
                .video-text{
                    h2{
                        margin-bottom: 10px;
                    }
                    span{
                        margin-right: 10px;
                    }
                }
            }
        }
        .detail-right{
             width: 400px;
             overflow-y: scroll;
             overflow-x: hidden;
             height: 520px;  
             h2{
                margin-left: 10px;
             }       
        }
    }
</style>